<template>
  <div>
    <chartContent title="各医院今日采集数">
      <div
        id="gatherTodayContainer"
        style="width: 22.7vw; height: 33.19vh"
      ></div>
    </chartContent>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, watch } from "vue";
import * as echarts from "echarts";
import chartContent from "./chartContent.vue";
const props = defineProps(["data"]);
let gatherTodayChart = null;
watch(props.data, () => {
  let gatherTodayContainer = document.getElementById("gatherTodayContainer");
  gatherTodayChart = echarts.init(gatherTodayContainer);
  let options = {
    grid: {
      left: "20%",
    },
    tooltip: {},
    color: ["#87CEFA", "#FF7F50", "#32CD32", "#DA70D6"],
    legend: {
      bottom: 25,
      itemWidth: 15,
      itemHeight: 8,
      itemGap: 6,
      textStyle: {
        color: "#D9DCE0",
        fontSize: 8,
      },
    },
    xAxis: {
      type: "category",
      data: props.data[0].data.map((item) => item.time),
      axisLabel: {
        color: "#D9DCE0",
      }
    },
    yAxis: {
      axisLabel: {
        color: "#D9DCE0",
        formatter: (value) => value + "k条",
      },
    },
    series: props.data,
  };
  gatherTodayChart.setOption(options);
});
onMounted(() => {
  window.addEventListener("resize", () => {
    gatherTodayChart.resize()
  });
});
onUnmounted(() => {
  window.removeEventListener('resize')
  echarts.dispose(gatherTodayChart);
  gatherTodayChart = null;
});
</script>

<style lang="less" scoped></style>
